@charset 'utf-8';
//header
header{
    padding:  22px 0;
    >div{
        >a{
            img{
            width: 72px;
            height: 44px;
        }
        }
        
        .rt{
            img{
                width: 18px;
                height: 16px;
            }
            font-size: 12px;
            color: #666;
            display: block;
            height: 44px;
            line-height: 44px;
            &:hover{
                color: #f40;
            }
        }
    }
}



//mian
main{
    background-image: url(../img/log-bg.jpg);
    height: 600px;
    background-repeat: no-repeat;
    background-position: 50%;
    padding-top: 100px;

    >div{
        width: 1200px;
        form{
            >a{
            display: block;
            width: 630px;
            height: 440px;
        }

        >.login{
           width: 350px;
           height: 350px; 
           padding: 25px;
            color: #6c6c6c;
            position: relative;
            
            background-color: hsla(0,0%,100%,.9);
            >a:first-child{
                position: absolute;
                right: 0;
                top: 0;
               
            }
           >div:nth-child(2){
               a{
                font-size: 16px;
                color: #3c3c3c;
                font-weight: 700;
                margin-right: 10px;
                position: relative;
                padding-bottom: 5px;
                
               }
               .bot{
                    border-bottom: 2px solid black;
                }
           }
           #phone{
               position: absolute;
               left: 65px;
               top: 77px;
            //    display: block;
               height: 40px;
               width: 65px;
               padding-left: 10px;
               padding-right: 14px;
               outline: none;
               border: none;
               z-index: 9;
               background: url(../img/sele-bg.png);
               background-size: 24px;
               background-repeat: no-repeat;
               background-position: 48px 8px;
               -webkit-appearance: none;
               background-color: white;
               cursor: pointer;
               size: 6;
               display: none;
               option{
                   padding-right: 100px;
               }
           }
           .name{
               position: relative;
               width: 300px;
               
               margin-top: 30px;
               font-size: 0;
               
               input{
                   height: 40px;
                   outline: none;
                   border: none;
                   width: 250px;
                   text-indent: 10px;
                   vertical-align: top;
                   font-size: 14px;
                   &::-webkit-input-placeholder { 
                    font-size: 12px;
                  }
               }
           }
           .pwd{
                width: 300px;
                margin-top: 30px;
                font-size: 0;
                position: relative;
                span{
                    display: block;
                    height: 40px;
                    width: 60px;
                    font-size: 12px;
                    color: #666;
                    position: absolute;
                    right: 20px;
                    top: 0;
                    z-index:9;
                    background-color: white;
                    line-height: 40px;
                    cursor: pointer;
                    display: none;
                }
                input{
                    height: 40px;
                    outline: none;
                    border: none;
                    width: 250px;
                    text-indent: 10px;
                    vertical-align: top;
                    font-size: 14px;
                    &::-webkit-input-placeholder { 
                        font-size: 12px;
                      }
                }
           }
           .submit{
               color: white;
               background-color: #f50;
               width: 300px;
               height: 42px;
               font-size: 16px;
               font-weight: 600;
               text-align: center;
               line-height: 42px;
               margin-top: 30px;
               cursor: pointer;
               border: none;
               &:hover{
                   background-color: #f52b00;
               }
           }
           .method{
               padding-top: 20px;
               a{
                   color: #666;
                   font-size: 12px;
                   img{
                       vertical-align: middle;
                   }
               }
           }
           .log-bot{
               padding-top: 10px;
               a{
                   color: #666;
                   font-size: 12px;
                    float: right;
                    margin-right: 10px;
               }
           }
        }
        }
        
    }
}








//footer

footer{

    .ft-top{
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
        padding-bottom: 10px;
        padding-top: 5px;
        padding-left: 5px;
        span{
            display: inline-block;
            height: 30px;
            line-height: 30px;
            a{

            color: #6c6c6c;
            font-size: 12px;
            margin-right: 5px;
            }
            a:hover{
                color: #f40;
            }
            i{
                color: #ccc;
                font-weight: 600;
                opacity: 0.8;
            }
        }
        
    }
    .ft-mid{
        
        p{
            padding-top: 5px;
            padding-left: 5px;
            margin-bottom: 0;

                a{
                    color: #6c6c6c;
                    font-size: 12px;
                    margin-right: 5px;
                }
                a:hover{
                    color: #f40;
                }
                span{
                    color: #ccc;
                    font-weight: 600;
                    opacity: 0.8;
                    margin-left: 10px;
                    margin-right: 10px;
                }
                em{
                    margin-left: 30px;
                    color: #9c9c9c;
                    font-size: 12px;
                }
                .f-a{
                    color: black;
                }
                .em1{
                    margin-left: 5px;
                }
                .em2{
                    margin-left: 0px;
                }
                
        }
        div:last-child{
            padding-left: 10px;
                    margin-top: 10px;
                }
    }
}